<template>
    <div class="content">
        <div class="middle">
            <div slot="header" class="clearfix " style="border-radius: 0px">
                <el-button type="primary" size="small">队列：{{ listNum }}</el-button>
                <el-button type="primary" size="small">已唱：{{ finishNum }}</el-button>
                <el-switch v-model="isOpen" active-color="#4f46e5" inactive-color="#ff4949" active-text="点歌已开启"
                    inactive-text="点歌已关闭" />
                <el-switch v-model="showTime" active-color="#4f46e5" inactive-color="#909399" active-text="显示点歌时间" />
                <el-switch v-model="showTimeOrder" active-color="#4f46e5" inactive-color="#909399"
                    active-text="按点歌时间排序" />
                <div class="music-add-div">
                    <el-input slot="append" class="input-with-select" placeholder="手动添加歌曲"
                        style="display:inline;float: left;" v-model="songNameAdd"></el-input>
                    <el-button slot="append" icon="el-icon-search" type="success" @click="addSong">添加</el-button>
                    <el-button slot="append" type="danger">清空歌单</el-button>
                </div>
            </div>
        </div>
        <div class="song-sheet">
            <el-table :data="songList" style="width: 100%" row-class-name="success-row">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column label="来源" width="60">
                    <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.type }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="歌曲名称" width="800">
                    <template slot-scope="scope">
                        <span class="songName">{{ scope.row.songName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="用户名" width="180">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="更多信息（待开发）" placement="top-start">
                            <el-button type="primary" icon="el-icon-info" circle size="mini"
                                    @click="moreMsg(scope.songName)"></el-button>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="复制歌名" placement="top-start">
                            <el-button type="info" icon="el-icon-document-copy" circle size="mini"
                                    @click="copySongName(scope.songName)"></el-button>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="完成" placement="top-start">
                            <el-button type="success" icon="el-icon-check" circle size="mini"
                                    @click="completeSong(scope.songName)"></el-button>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="取消" placement="top-start">
                            <el-button type="danger" icon="el-icon-close" circle size="mini"
                                    @click="cancelSong(scope)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>


</template>

<script>

export default {
  data() {
    return {
      listNum: 0, // 队列中的歌单数量
      finishNum: 0, // 已唱的歌单
      isOpen: true, // 点歌已开启
      showTime: true, // 显示点歌时间
      showTimeOrder: true, // 按点歌时间排序
      songNameAdd: '', // 添加歌曲
      songList: [{
        index: 0,
        type: '弹幕',
        name: '测试人1',
        songName: '测试歌曲1',
      }, {
        index: 1,
        name: '测试人2',
        type: '弹幕',
        songName: '测试歌曲2',
      }]
    }
  },
  methods: {
    // 手动添加歌曲
    addSong() {
      let songObj = {
        index: this.songList.length,
        name: '我自己',
        songName: this.songNameAdd,
        type: '弹幕'
      }
      this.songList.push(songObj)
      this.songNameAdd = ''
    },
    // 复制歌名
    copySongName(name) {
      console.log(name)
    },
    // 完成
    completeSong() {

    },
    // 取消歌曲
    cancelSong(songObj) {
      // 删除指定下标的元素
      this.songList.splice(songObj.$index, 1)
    },

    // 更多信息
    moreMsg() {

    }
  }


}
</script>

<style>
/* 中间按钮的部分 加上一层边框 */
.middle {
    margin-bottom: 16px;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
}

/* 撑开距离 上下边距 */
.middle .clearfix {
    padding: 16px;
}

/* 修改按钮的颜色 */
.middle .clearfix .el-button--primary {
    background: #6366f1;
    padding: .50rem .4rem;
    border-radius: 6px;
    border-color: #6366f1;
}

/* 按钮和开关之间间距 */
.middle .clearfix .el-switch {
    margin: 0 24px;
}

/* 按钮浮动 */
.music-add-div {
    float: right;
}

/* input框限制宽度 */
.el-input {
    width: 130px;
}

/* 数据列表 hover背景颜色 即 鼠标移上去的背景颜色*/
.el-table__body tr.hover-row.current-row>td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,
.el-table__body tr.hover-row>td.el-table__cell {
    background-color: #d6e9ff
}

/* tag样式 */
.song-sheet .el-tag {
    background: #0ea5e9;
    color: #fff;
}

/* 歌曲名字体加粗 */
.song-sheet .songName {
    font-weight: bold;
}
/* info小按钮颜色 */
.song-sheet .el-button--info {
    color: #FFF;
    background-color: #6366f1;
    border: 1px solid #6366F1;
}

/* .input-with-select .el-input-group__prepend {
    background-color: #fff;
} */
</style>
